<template>
    <div>
        <el-form class="search" inline label-width="80px">
            <el-form-item>
                <el-select v-model="search.cate_id" placeholder="文章类别">
                    <el-option v-for="(v, k) in dict.cate_id" :key="k" :label="v.label" :value="v.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="search.author_id" placeholder="作者">
                    <el-option v-for="(v, k) in dict.author_id" :key="k" :label="v.label" :value="v.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="getPage()" type="primary">搜索</el-button>
                <el-button @click="resetHandler" type="danger">重置</el-button>
                <el-button @click="addHandler" type="primary">新增</el-button>
                <el-button @click="exportHandler" type="warning">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column label="文章标题" prop="title" />
            <el-table-column label="文章内容" prop="content" />
            <!-- <el-table-column label="封面图片" prop="cover_img" /> -->
            <el-table-column label="发布时间" prop="pub_date" />
            <el-table-column label="文章类别" prop="cate_id">
                <template #default="{ row }">
                    <template v-for="(v, k) in dict.cate_id">
                        <div :key="k" v-if="v.value == row.cate_id">{{v.label}}</div>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="作者" prop="author_id">
                <template #default="{ row }">
                    <template v-for="(v, k) in dict.author_id">
                        <div :key="k" v-if="v.value == row.author_id">{{v.label}}</div>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button @click="editHandler(row)" type="primary">编辑</el-button>
                    <el-button @click="delHandler(row)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="justify-content: flex-end; padding: 15px 0;" background layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="sizeChange" @current-change="currentChange" />
        <el-dialog :title="dialog.title" v-model="dialog.show" width="480px">
            <el-form label-width="80px">
                <el-form-item label="文章标题">
                    <el-input v-model="dialog.form.title"></el-input>
                </el-form-item>
                <el-form-item label="文章类别">
                    <el-select v-model="dialog.form.cate_id" placeholder="请选择">
                        <el-option v-for="(v, k) in dict.cate_id" :key="k" :label="v.label" :value="v.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="文章内容">
                    <el-input type="textarea" v-model="dialog.form.content" rows="5" />
                </el-form-item>
                <!-- <el-form-item label="封面图片">
                    <el-input v-model="dialog.form.cover_img"></el-input>
                </el-form-item> -->
            </el-form>
            <template #footer>
                <el-button type="text" @click="dialog.show = false">取消</el-button>
                <el-button type="primary" @click="submitHandler">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import {
        articleInfoList,
        articleCateList,
        articleInfoAdd,
        articleInfoUpdate,
        userList,
        articleInfoDel
    } from '@/api'
    import {
        onMounted,
        ref
    } from 'vue'
    import {
        ElMessage
    } from 'element-plus'
    import {
        xlsExport
    } from '@/utils'

    let dict = ref({})
    onMounted(async _ => {
        let r = await articleCateList()
        dict.value.cate_id = r.data.map(c => ({
            label: c.name,
            value: c.id
        }))
        dict.value.author_id = (await userList()).data.map(c => ({
            label: c.user_name,
            value: c.id
        }))
    })

    let tableData = ref([])
    let search = ref({})
    let page = ref({
        pageNum: 1,
        pageSize: 10,
        total: 0
    })
    let getPage = async _ => {
        let p = Object.assign({}, page.value, search.value)
        let r = await articleInfoList(p)
        tableData.value = r.data
        page.value.total = r.total
    }
    let sizeChange = e => {
        page.value.pageSize = e
        getPage()
    }
    let currentChange = e => {
        page.value.pageNum = e
        getPage()
    }
    let resetHandler = _ => {
        search.value = {}
        page.value = {
            pageNum: 1,
            pageSize: 10,
            total: 0
        }
        getPage()
    }
    getPage()




    let dialog = ref({
        show: false,
        title: '',
        form: {}
    })
    let addHandler = _ => {
        dialog.value = {
            show: true,
            title: '新增',
            form: {}
        }
    }
    let submitHandler = async _ => {
        let f = dialog.value.form
        let r = f.id ? await articleInfoUpdate(f) : await articleInfoAdd(f)
        ElMessage.success(r.msg)
        dialog.value.show = false
        getPage()
    }
    let editHandler = row => {
        dialog.value = {
            show: true,
            title: '编辑',
            form: JSON.parse(JSON.stringify(row))
        }
    }
    let delHandler = async row => {
        let r = await articleInfoDel(row)
        ElMessage.success(r.msg)
        getPage()
    }
    let exportHandler = _ => {
        tableData.value.forEach(c => {
            c.cate_name = dict.value.cate_id.find(d => d.value == c.cate_id).label
            c.author_name = dict.value.author_id.find(d => d.value == c.author_id).label
        })
        xlsExport({
            header: ['文章标题', '文章内容', '发布时间', '文章类别', '作者'],
            props: ['title', 'content', 'pub_date', 'cate_name', 'author_name'],
            sourceData: tableData.value,
            fileName: '文章信息'
        })
    }
</script>

<style lang="scss" scoped>
    // 搜索区域样式
    .search {
        ::v-deep .el-form-item {
            margin-bottom: 5px;
        }

        // 控件宽度控制在200
        ::v-deep .el-select {
            width: 200px;
        }
    }
</style>